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As information delivery systems on the Internet 
increasingly evolve into World Wide Web browsers, understanding key 
graphical elements of the browser interface is critical to the design 
of effective information display and access tools. Image maps are one 
such element, and this document describes a pilot study that 
collected, reviewed, and evaluated image maps from homepages of 
•educational institutions. World Wide Web browsers offer a high level 
of interaction through hyperlinks, most of which involve text or a 
simple image. Image maps, on the other hand, are complex visuals that 
contain multiple hyperlinks to a number of information resources. 
Effective image maps offer clearly defined multiple links or "hot 
spots," present visual content that supports the theme or purpose of 
the site, permit backtracking and bookmarking, help the user build 
mental models of the interrelationships of information resources, do 
not take too long to load, and do not clutter the display. 

Researchers developed a survey form, for use by nine independent 
viewers, that sought to evaluate sites by those visual, navigational, 
and practical criteria. Fifty-five surveys on institutional homepages 
were collected from the nine viewers, and they revealed primarily 
that viewers placed a higher premium on simplicity than on pure 
visual appeal. Artistically captivating image maps often violated 
rules of simplicity; individual hot spots were hard to distinguish, 
choices were too multilayered to allow for a quick return to the 
starting point, and loading was slow. Reproductions of 11 
institutional homepages accompany the text. Two other figures include 
a bar graph comparing average viewer ratings by site and a list of 
tips for image map design. (Contains 16 references.) (BEW) 
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Introduction 

The recent evolution of information 
delivery systems on the Internet into World 
Wide Web “browsers” like Netscape or 
Mosaic presents an exciting field for study 
in visual literacy. Such tools are rapidly be- 
coming a major interest to small and large 
business concerns (Ellsworth, 1995) and 
may soon impact the nature of education in 
profound ways (Perelman, 1992). Under- 
standing the visual characteristics of the im- 
age map, a key element in these new graphi- 
cal interfaces to the Internet, is critical to the 
design of effective information display and 
access tools. 

This study investigates the evalua- 
tions of different image maps selected from 
current home pages of educational institu- 
tions on the World Wide Web. Indepen- 
dent viewers and a survey form using crite- 
ria relating to visual literacy and hypermedia 
design were used to investigate the effec- 
tiveness of these image maps. This paper 
discusses research results relative to visual, 
navigational, and practical characteristics. 



Literature Review 

World Wide Web 

As recently as the middle of 1993. 
the delivery of hypermedia modules over 
computer networks was problematic. A 
mechanism was needed that would standard- 
ize structural principles for the delivery of 
such modules and that would be “within the 
economic reach of ordinary users” (Howard. 
1993). By the middle of 1994, exactly such 
a mechanism, the World Wide Web. had 
become available. Now, the full spectrum 
of communication tixils is available electroni- 
cally. Today many resources of 
hypermedia — integrated text, graphics, au- 
dio, animation, and video — are accessible 
across the World Wide Web (WWW). 

The WWW is the fastest growing in- 
formation tool on the Internet (Descy, 1 994). 
Along with the rich multimedia communi- 
cations, graphical web browsers also provide 
a very high level of interaction. Users can 
quickly jump to new, related information 
using interactive linking tools like “buttons." 
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"hot words," or "image maps.” These 
hyperlinks can connect users to new infor- 
mation resources on their own campus, 
within their own towns, or around the world 
with the simple click of a mouse button 
(Dougherty & Koman, 1994). 

linage Maps 

Graphics may be used to capture a 
viewer's attention, to hold interest 
(Grabinger, 1993), to supplement and rein- 
force textual materials (Lucas, 1991) or to 

Figure 1 

Simple Graphic Links to Single Data 
Sets. 
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Figure 2 

Multiple Links from One Image Map 
to Several Data Sets. 

(hUp://home. nctscape.com/) 
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provide organizational overviews of complex 
data (Grabinger, 1993), (Koneman & 

Jonassen, 1994). Likewise, in web brows- 
ers, graphics may just add visual interest, 
mark a simple link to related information, or 
indicate organized multiple links to a com- 
plex information set. In the WWW, these 
links are called hyperlinks. 

A hyperlink is the connection be- 
tween a word or graphic in an active browser 
view to another file anywhere on the World 
Wide Web (Hudak- David, 1994). A simple 
graphic hyperlink connects a single image 
to a single information resource (Figure 1). 

The image map (Figure 2) provides easy 
multiple choice access for web users. An 
image map connects a single, complex vi- 
sual by multiple hyperlinks to a number of 
related information resources (www'@ 
trace.wisc.edu; Wiggins, 1994). A web 
browser recognizes when a user clicks a dis- 
played “hot word” or “hot spot” and simply 
opens a connection to the pre-programmed 
uniform resource locator (URL - the Internet 
address of the desired resource). Currently, 
the image map is the most refined expres- 
sion of this integration. 

Image Map Design Issues 

Effective image maps require care- 
ful design with respect to visual and interac- 
tive aspects as they pertain to the users. User 
interface design for image maps touches on 
three broad areas: visual characteristics, navi- 
gational characteristics, and practical char- 
acteristics. 

Visual Characteristics 

Visually, it is important that an im- 
age map be easily recognized as an image 
map. There should be visual cues that tell 
users they are dealing with an image map. 

The visual content presented in an image 
map should also support a typical viewer’s 
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expectations relative to the information the 
graphic is supposed to represent (Lucas, 
1991). For example, an image map for a 
university in Arizona would probably not be 
designed around an arctic theme. 

The individual graphics and related 
“hot spots” within an image map should rep- 
resent the natures of the key informational 
segments. For instance, a book icon is a 
good representation for library services. Hot 
spots within an image map should be easy 
to recognize (Lucas, 1991; Jones, 1995). 
Often, a change in the mouse cursor will cue 
the presence of hot spots. In other cases, 
maps or similar structural features suggest 
the possibilities of hot spots. An image map 
should be artistic and visually appealing but 
not too busy or cluttered (Lucas, 1991; 
Jones, 1995; Grabinger, 1993). 

Navigational Characteristics 

Navigation is the act of recognizing 
and initiating a hyperlink to new informa- 
tion. Navigational aids should, if desired by 
the viewer, permit returning to the starting 
point in order to investigate other possibili- 
ties. Back tracking and book marking are 
additional navigational aids to help clarify 
the structure of multiple paths and provide 
quick repeated accesses to pertinent infor- 
mation (Desberg, 1994; Jones, 1995). Im- 
age maps should help users build mental 
models of the underlying structure and in- 
ter-relationships of information resources 
(Lucas, 1991). 

Navigational pit falls such as dead 
ends, endless choices, or links to non-exis- 
tent resources should be avoided. Links to 
non-existent resources are troublesome given 
how frequently web pages change. Finall)'. 
“help” should be available on demand or 
when “non-hot-spot” areas of an image map 
are clicked (Desberg. 1994). 



Practical Characteristics 

Practical concerns consider the 
implementation or working characteristics of 
image maps. An image map graphic should 
not take too long to load (Desberg, 1 994) 
and the special effects (image overlay, fades, 
fonts, extraneous visual information, colors, 
3D, animations, video, backgrounds) should 
not clutter the display or frustrate the viewer 
(Desberg, 1994). It should be easy to tell 
what resources have been visited in the cur- 
rent session with the image map (Jones, 
1995). A visual consistency (Grabinger, 
1993) should tie the image map and its re- 
lated information resources together, cueing 
the viewer that he or she has not branched 
off into unknown or unexpected territories 
(Lucas, 1991). The graphics and the related 
information resources should fit the target 
audience (Desberg, 1994). 



Methodology 

Development of Survey Questionnaire 

Since there is no previous research 
about image maps, this research represents 
a pilot study directed toward developing an 
evaluation procedure. Starting with guide- 
lines from several computer-related product 
checklists in the literature (Lucas, 1991: 
Desberg, 1994; Cates, 1992; Tolhurst. 
1992), the authors developed a 20 question 
survey form addressing design issues based 
on visual, navigational, and practical char- 
acteristics. Two initial surveys, conducted 
as a pilot for formative evaluation, deter- 
mined changes and clarifications needed in 
the questionnaire. Following the pilot, the 
scale of evaluation was changed from 1 -4 
(strongly disagree to strongly agree) to 1 -1 0 
(ten step scale from disagree to agree) in 
order to clarify and strengthen the differences 
in viewer opinions. 
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Initially, questions were stated so that 
a high numeric response indicated strong 
agreement. However, some questions be- 
came awkward to read in this format. For 
example, one question stated “I was not frus- 
trated by the image map.” The authors were 
concerned the question could be confusing 
because of the non-typical negative struc- 
ture so a few questions were re-phrased on 
the survey form. This sample question was 
re-written ”I was frustrated by the image 
map.” In this format, a response of 1 sug- 
gests a good image map. 

Of the twenty questions, eight ques- 
tions covered visual characteristics. For ex- 
ample. the questions ask how easy the 
graphic is to recognize as an image map, how 
noticeable the hot spots are, or how appeal- 
ing is the image map. The navigational as- 
pects. using seven questions, ask how easy 
it is to move from page to page, how easy it 
is to return to the starting point, or if help is 
available. Five questions cover the practical 
concerns such as how long graphics take to 
load, how consistent the graphics are at a 
particular site, or if the image maps are frus- 
trating. 

Selection of WWW Sites 

The evaluation scope was limited to 
educational or institutional home pages on 
the WWW. The Net Directory option of 
the web browser Netscape 2.0 was the sam- 
pling source using the category of educa- 
tion. Two sites from each of 36 sub-catego- 
ries of the educational area were randomly 
selected by the authors. While examining 
the 72 site options, the authors selected im- 
age maps that covered the spectrum from 
difficult to facilitative for typical users. Nine 
sites, (Figures 3 through 11) representing 
visual, navigational, and practical image 
map characteristics, were selected for the 
final evaluation by independent viewers. 



Independent Viewers 

Nine viewers were involved in this 
survey. Most of them are education gradu- 
ate students taking instructional technology 
classes. Others were volunteers. They in- 
dividually came to a computer station con- 
nected to the Internet and spent about one 
hour evaluating the image maps. Addresses 
of the nine sites and the survey form were 
given to the viewers and they usually de- 
cided which sites to evaluate out of the nine 
possibilities. Viewers’ activities were ob- 
served by the authors during their evalua- 
tion time. Only two viewers finished evalu- 
ating all nine sites within an hour while one 
individual spent an hour and a half. Most 
of them evaluated four or five sites within 
an hour. Those who finished all nine sites 
within an hour were already familiar with 
the Worldwide Web and image maps. Most 
viewers were quite new to the WWW and 
spent the first ten to fifteen minutes explor- 
ing. Those who were unfamiliar with the 
WWW were given some advice while ex- 
ploring the image maps. 

Results and Conclusions 

Fifty-five surveys were collected 
from nine viewers. Each site was evalu- 
ated four to seven times by different view- 
ers. For analysis, every question item has 
the same value system: the higher the score. 



Figure 3 

Discovery Channel Image Map. 

(ht(p'.//www.discovery.com/DCO/doc/1012/online.html) 
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Figure 4 

Educom Image Map. 

(http://www.educom.edu/) 




Figure 5 

Excite Image Map. 

(http://oberon.educ.sfu.ca:80/newhome.htm) 




Figure 6 

Paris Museums Image Map 



(http://meteora.uscd.edu/-nonnan/paris/Maps/MM) 




Texas A&M University Image Map. 



(http://www.tamu.ed»i/test/map/map.cgi) 




Figure 7 

QuickTime Image Map. 

(http://qtvr3.quicktime.apple.com/) 




Figure 9 

UCLA Image Map. 

(http://www.ucla.edu/) 
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Figure 10 

University of Wyoming Image Map. 

(http://www.uwyo.edu/) 




the more positive the map characteristic. 
The 20 survey items were grouped into three 
categories; visual, navigational, and prac- 
tical. Because each category reflects a dif- 
ferent number of questions and a different 
number of viewer evaluations, the total 
score of each category was divided by the 
number of questions times the number of 
viewers in order to give a comparable 
weight to each category. Figure 12 shows 
the analysis of the data. 

Overall Rankings 

Overall, the image maps of UCLA 
(Figure 9) and Educom (Figure 4) were se- 
lected as the best. In visual characteristics, 
UCLA and Educom also claim the top two 
rankings. From a navigational perspective, 
the Virtual Tourist (Figure 1 1), the Texas 
A&M campus map (Figure 8), and the 
Educom image map occupy the top three 
spots in a very close ranking. Finally, from 
a practical viewpoint, UW (Figure 10) has 
the highest ranking. The UW result is sup- 
ported by an independent study of nearly 
500 college web pages conducted at Colum- 
bia University, which also considered vi- 
sual and practical characteristics (Johnson, 
et. ah, 1995). Their study highly rated the 
UW web page for good presentation of gen- 
eral information. 




Figure 11 

Virtual Tourist Image Map. 



(http://wings.buffalo.edu/world) 




Visual Perspective 

There seems to be two conflicting 
elements at work in the visual analysis. Im- 
age maps can be very artistic and complex 
or rather simple. When viewers are looking 
for direction to information, they appear to 
prefer simple image maps. Even when view- 
ers were asked how visually appealing a 
graphic was, they seemed to judge the de- 
gree of appeal by how easily they could get 
to information. If they could quickly locate 
hot spots in the image map and if the icons 
accurately represented the information, they 
seemed to prefer the graphic. The UCLA 
(Figure 9) and Educom (Figure 4) image 
maps, which ranked the highest, both use a 
simple and well-grouped layout. 

InGrabinger’s study (1993), simplic- 
ity is one of the important factors in com- 
puter screen design. Besides simplicity, 

Lucas ( 1 99 1 ), in a study about effective com- 
puter-learner interfaces, states that grouping 
has a very strong influence on commanding 
and focusing viewer attention. As counter- 
examples, Quicktime (Figure 17), Excite 
(Figure 5), and Discovery (Figure 3) present 
more artistically interesting image maps. 
However, these three all violate the rules 
of simplicity and united grouping. For in- 
stance, the Quicktime image map scatters 
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Figure 12 

Comparison of Average Viewer Ratings by Site: Overall, Visual, Navigational, and 

Practical. 
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hot spots all around the graphic which de- 
focuses or scatters view'ers’ attention and 
results in the lowest visual ranking. The 
Discovery and Excite image maps appear 
to override marginal grouping with a too 
complex image. 

Navigational Perspective 

Navigation deals with the mechan- 
ics of moving through the available infor- 
mation. Regarding navigational aspects, the 
Virtual Tourist (Figure 11), Texas A&M 
campus (Figure 8), and Educom (Figure 4) 
image maps were selected the best. These 
sites do not give the viewers many layers of 
choices. Thus, it is easy to link out in a single 
step and quickly return to the starting point. 
The high ratings for the Virtual Tourist and 
Texas A&M image map r, may also be a func- 
tion of the physical nature of the informa- 
tion they represent. Grabinger (1991) sug- 



gests that viewers prefer screens designed 
to closely reflect the content of the subject 
matter. 

Practical Perspective 

As to practical aspects. U W (Figure 
10), Educom (Figure 4). and UCLA (Fig- 
ure 9) ranked highest. Typically, these im- 
age maps are smaller and load quickly. Spxr- 
cial effects are minimal. Consistency is a 
strong characteristic of these image maps and 
their related information pages. The linking 
pages have visual cues such as icons or 
graphics very similar to the original image 
map. These maps were also highly rated in 
visual criteria, suggesting practical charac- 
teristics may be correlated with visual char- 
acteristics. Artistic images, such as the Dis- 
co\ery or QuickTime image maps (Figure 
3. Figure 7). tend to be large, complex and 
slow to load. 
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Discussion and Recommendations 

This pilot study presents a number 
of factors that appear to be important to ef- 
focti\e image map design when a viewer’s 
purpose is to locate specific information. In 
this instance, functionality is the most im- 
portant aspect. Simple graphics that load 
quickly and clearly designate hot spots ap- 
pear to be preferred by the viewers in this 
study. Viewers, particularly novices, also 
wanted some site-specific help available 
when navigating web sites. Figure 13 pre- 
sents the authors’ recommendations as a 
■■quick" guide for designing effective image 
maps for informational purposes. The 
Hducom (Figure 4) image map, which placed 
somewhere in the top three rankings in each 
category, is the best example of these rec- 
ommendations. 



There may be different design guide- 
lines when entertainment is the purpose of 
the image map. There is an interesting ten- 
sion between artistic and functional aspects 
of image map design. A web designer must 
consider the balance between the purposes 
served by the maps and the intentions of the 
prospective view'ers. From this research, 
viewers seeking information want functional, 
simple maps but viewers “surfing the web" 
may pass over such simple maps for the more 
artistic and entertaining images. The chal- 
lenge to the image map designer is to find 
the balance between artistic needs to catch 
the viewer and functionality to allow the 
viewer to find information quickly. This 
balance issue presents opportunities for fu- 
ture research. 



Figure 13 

Summary Design Guide for Functional Image Maps. 



“QUICK GUIDE” 

for 

Functional Image Maps 

• Use simple graphics 

• Use smaller rather than larger image sizes 

• Clearly define hot spots 

• Use unified rather than scattered groupings 

• Choose icons to accurately represent information 

• Design image map to model the structure of the information 

• Use a minimal number of layers 

• Limit the number of choices 

• Include site-specific help 
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